<template>
    <div class="wrapper">
        <v-head></v-head>
        <v-breadBar v-if='isShowBread'></v-breadBar>
        <div class="content-box">
            <transition name="move" mode="out-in"><router-view></router-view></transition>
        </div>
		<v-footer></v-footer>
    </div>
</template>

<script>
import vHead from '@/components/Header.vue';
import vSidebar from '@/components/Sidebar.vue';
import vBreadBar from '@/components/BreadBar.vue';
import vFooter from '@/components/Footer.vue';
export default {
    components: {
        vHead,
        vSidebar,
		vBreadBar,
		vFooter
    },
	data() {
		return {
			isShowBread:false,
			showBreadList:[
				"/my-work",
				"/my-collect",
				'/my-integral',
				'/my-student',
				'/student-work',
				'/student-work-detail'
			]
		};
	},
	
	watch:{
		$route:{
			handler:function(newV,oldV){
				const path = newV.path;
				this.isShowBread = this.showBreadList.includes(path) ? true :false
			},
			deep:true,
			immediate:true
		}
	}
};
</script>

<style lang="scss" scoped>
	.wrapper{
		width: 100%;
		background: url('../assets/img/bg.png') no-repeat center center;
		background-size: 100% 100%;
		box-sizing: border-box;
		.content-box {
		    width: 100%;
		    // position: absolute;
		    // right: 0;
		    // left: 220px;
		    // top: 92px;
		    // bottom: 0;
			margin-bottom: 15px;
			border-radius: 5px 5px 5px 5px;
		    -webkit-transition: left 0.3s ease-in-out;
		    transition: left 0.3s ease-in-out;
		    background: #FFFFFF;
		    padding: 30px;
		    box-sizing: border-box;
		    overflow-y: auto;
		}
	}

</style>
